<template>
  <div v-loading="loading" class="app-container">
    <page-tools
      :is-show-cate="true"
      :is-show-tag="true"
      search-txt="文章标题"
      add-txt="新增文章"
      @onSearchKey="onSearchKey"
      @onCategoryChange="onCategoryChange"
      @onTagChange="onTagChange"
      @onAdd="onAddArticle('新增')"
      @onRefresh="onRefresh"
    />
    <el-table :data="list" border style="width: 100%">
      <el-table-column fixed type="index" label="序列" width="50" align="center" />
      <el-table-column prop="thumbnail" label="文章封面" width="180" align="center">
        <template v-slot="scope">
          <el-image
            v-if="scope.row.thumbnail"
            style="width: 100px; height: 100px"
            :src="scope.row.thumbnail"
            fit="contain"
          />
          <el-image v-else>
            <div slot="error" class="image-slot">
              <i style="font-size: 100px" class="el-icon-picture-outline" />
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="文章标题" width="180" align="center" />
      <el-table-column prop="author_name" label="文章作者" width="150" align="center" />
      <el-table-column prop="category_name" label="类型" width="150" align="center">
        <template v-slot="scope">
          <el-tag>
            {{ scope.row.category_name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="tag_names" width="260" label="标签" align="center">
        <template v-slot="scope">
          <el-tag v-for="(item, index) in scope.row.tag_names" :key="index" type="success" class="ml-10">
            {{ item }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="view_count" label="浏览次数" width="150" align="center" />
      <el-table-column prop="status" label="状态" width="150" align="center">
        <template v-slot="scope">
          <el-tag>
            {{ scope.row.status === "draft" ? "已发布" : "草稿" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="发布时间" width="180" align="center">
        <template v-slot="scope">
          {{ scope.row.createTime | getTime }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            :disabled="!checkPermission('point-update')"
            @click="onAddArticle('编辑', scope.row.id)"
          >编辑</el-button>
          <el-button type="text" size="small" :disabled="!checkPermission('point-del')" class="del">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <PagePagination
      :page="pageParams.page"
      :page-size="pageParams.pageSize"
      :total="total"
      @update-page="onUpdatePage"
      @update-size="onUpdateSize"
    />
    <article-drawer
      :show.sync="isShowDrawer"
      :type="type"
      :curr-article-id="currArticleId"
      @update-article="getArticleList()"
    />
  </div>
</template>

<script>
import { getArticleListAPI } from '@/api/article'
import ArticleDrawer from './components/ArticleDrawer.vue'

export default {
  components: { ArticleDrawer },
  data() {
    return {
      loading: false,
      list: [],
      pageParams: {
        page: 1,
        pageSize: 5
      },
      total: 0,
      isShowDrawer: false,
      type: '',
      currArticleId: 0
    }
  },
  mounted() {
    this.getArticleList()
  },
  methods: {
    async getArticleList() {
      this.loading = true
      const res = await getArticleListAPI(this.pageParams)
      this.list = res.data.result
      this.total = res.data.total
      this.loading = false
    },
    onUpdatePage(page) {
      console.log(page)
      this.pageParams.page = page
      this.getArticleList()
    },
    onUpdateSize(size) {
      this.pageParams.pageSize = size
      this.getArticleList()
    },
    async onAddArticle(type, id) {
      this.type = type
      this.currArticleId = id
      this.isShowDrawer = true
    },
    // 关键字查询
    onSearchKey(searchKey) {
      this.pageParams.searchKey = searchKey
      this.getArticleList()
    },
    // 分类改变
    onCategoryChange(id) {
      this.pageParams.category_id = id
      this.getArticleList()
    },
    // 标签改变
    onTagChange(id) {
      this.pageParams.tag_id = id
      this.getArticleList()
    },
    // 刷新
    onRefresh() {
      this.pageParams = {
        page: 1,
        pageSize: 5
      }
      this.getArticleList()
    }
  }
}
</script>

<style lang="scss" scoped>
.ml-10 {
  margin-left: 10px;
}
</style>
